const webpackBase = require('./webpack.config.base.js');

const merge  = require('webpack-merge');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config =  require('./src/app.config.js');
const { CURRENT } = require('./src/app.environment.js')

function  getEnvironmentInfo (val) {
    let result =  config.branches.filter(item => item.value ===  val);
    return result ? result[0] : config.branches[0]
}

const environmentInfo = getEnvironmentInfo(CURRENT);
console.log("\n 开发环境\n")

module.exports =  merge( webpackBase, {
    mode: 'development',
    devtool: 'inline-source-map', // 追踪源码错误
    devServer: {
        contentBase: '/dist',
        port: '8866',
        overlay: true, // 编译出错显示在页面上
        progress:true,// 显示打包进度,
        hot: true,
        proxy: {
            '/api': {
            //   target: 'http://yapi.jjmou.cn/mock/10/ts/api',
              target: 'http://localhost:3000/api/',
              pathRewrite: {'^/api' : ''},
              changeOrigin: true,     // target是域名的话，需要这个参数，
              secure: false,      
            }    // 设置支持https协议的代理
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: ['style-loader']
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                    hmr: true,
                    },
                },
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                      ident: 'postcss',
                      plugins: [
                        require('autoprefixer')()
                      ]
                    }
                },
                'sass-loader',
                ],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: `${environmentInfo.base.title}-开发环境`,
            filename: 'index.html',
            template: 'src/index.dev.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
    ]
})